<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link rel="stylesheet" type="text/css" href="/static/v2/css/base/login.css"/>
</head>

<body>

<div class="item">
    <div class="logo">
        <img src="/static/v2/img/product-hm.png" alt="网站统计">
    </div>
    <div class="title">HAO-TOOL</div>
    <div class="desc">
        简单的自定义开发小助手，为开发过程中某些特定场景提供便捷的服务
    </div>
    <div class="desc" style="text-align: center">
        登录后获取更全面的功能
    </div>
    <div class="opts">
        <a href="javascript:;" class="tiyan"><span>立即体验</span><em></em></a>
    </div>
</div>
<!--按钮结束-->

<!--弹窗开始-->
<div class="tan">
    <div class="box">
        <div class="form">
            <span class="close">✖</span>
            <h3>欢迎来到 HAO-TOOL</h3>
            <p class="desc">测试/开发/其他 账号请在此授权</p>
            <form action="" onSubmit="return false;">
                <input type="text" name="name" id="name" placeholder="请输入授权码"/>
                <div class="error"></div>
                <input type="submit" id="Submit" value="登录">
            </form>
            <p class="reg">
                <a href="#">立即注册</a>
                <a href="#">忘记密码 </a>
            </p>
        </div>
    </div>
</div>
<!--弹窗结束-->
<script src="/static/v0/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    $(function () {
        //弹窗
        $('.tiyan').click(function () {
            $('.tan').show();
        })
        //关闭
        $('.close').click(function () {
            $('.tan').hide();
        })
        //触焦变色
        $("input").focus(function () {
            $(this).removeClass('red');
        });
        //失去焦点验证当前表单
        var emailreg = /^[0-9a-zA-Z_]{1,}$/;

        $("#name").blur(function () {

            var errtxt = "",
                name = $('#name').val();
            if (name == "") {
                errtxt = "请输入授权码";
                $('#name').addClass('red');
            } else if ((!emailreg.test(name))) {
                errtxt = "请输入正确的授权码";
                $('#name').addClass('red');
            } else {
                errtxt = "";
                $('#name').removeClass('red');
            }
            //错误提示消息，有错误则显示，没错误就隐藏
            showmsg(errtxt);
        })
        //验证
        $('#Submit').click(function () {
            var thisid = "",
                errtxt = "";
            $('input').removeClass('red');
            var name = $('input[name=name]').val();

            if (name == "" || (!emailreg.test(name))) {
                errtxt = "请输入正确的授权码";
                thisid = "name";
            } else {
                $.ajax({
                    url: "rest/base/login",
                    type: "post",
                    data: {
                        authUserCode: name,
                    },
                    dataType: "json",
                    success: function (data) {
                        if (data.code == '200') {
                            alert("登录成功");
                        } else {
                            var msg = data.msg != '' ? data.msg : "登录失败";
                            alert(msg);
                        }
                    }, complete: function () {
                    }
                });

            }
            //错误提示消息，有错误则显示，没错误就隐藏
            showmsg(errtxt);
            //错误边框变红
            thisid ? $('input').removeClass('red').parents('form').find('#' + thisid).focus().addClass('red') : $('#' + thisid).removeClass('red');
        })

        function showmsg(errtxt) {
            errtxt ? $('.error').show().text(errtxt) : $('.error').hide();
        }
    })
</script>

</body>

</html>